<template>
    <div>
        <!-- action="http://localhost:8080/users/change_avatar" -->
        <h1>i am Xiaouploadavatar</h1>
        <el-upload
        :drag="true"
        class="avatar-uploader"
        action="http://101.43.68.39/users/change_avatar"
        method="get"
        enctype="multipart/form-data"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :on-error="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div class="el-upload__text" v-show="!imageUrl">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" v-show="!imageUrl" slot="tip">只能上传jpg格式文件，且不超过2M</div>
        </el-upload>
    </div>
</template>

<script>
    export default {
        name:'Xiaouploadavatar',
            data() {
                return {
                    imageUrl: '',
                };
            },
            methods: {
                handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                    console.log("AAA",file,"BBB",res);
                    this.$message({
                    message: '上传头像成功',
                    type: 'success'
                    });
            
                    //将服务器端返回的头像地址设置img标签的src属性上
                    //attr(属性,属性值):给某个属性设置某个值
                    // $("#img-avatar").attr("src",json.data);
                    //将头像保存在cookie中
                    // $.cookie("avatar",json.data,{expires:7});
                    this.$cookies.set("avatar",res.data)
                },
                handleAvatarError(err,file,fileList){
                    console.log('###',err,'@@@',file,'%%%',fileList);
                    this.$message.error({
                        message: '上传头像失败!'
                    });
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                }
            },
            mounted(){
                this.imageUrl=this.$cookies.get('avatar')

                console.log('你好我在获取用户头像');
                
                this.$addr.get(`users/get_by_uid`).then(
                response=>{
                    console.log('请求成功了,我获取到了用户的数据',response)
                    this.imageUrl=response.data.data.avatar
                },error=>{
                    this.$message({
                        message: '呕吼请求失败了',
                            type: 'warning'
                        });
                    console.log('请求失败了,我没有获取到用户的数据',error)
                })
            }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 38px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin: auto;
  }
  .el-upload__text{
      font-size: 13px;
      height: 40px;
      margin-top: -70px;
  }
</style>